<template>
  <div>
    <div class="title-wrapper">
      <h3>我的发起</h3>
    </div>
    <Form :model="searchForm" class="search-form" inline ref="searchForm">
      <div>
        <FormItem class="process-type" prop="businessname">
          <Input placeholder="审批类型" v-model="searchForm.businessname" />
        </FormItem>
        <FormItem class="process-type" prop="organizer">
          <Input placeholder="发起人" v-model="searchForm.organizer" />
        </FormItem>
        <!-- 测试要求去掉 -->
        <!-- <FormItem class="process-type" prop="projectname">
          <Input placeholder="单位工程名称" v-model="searchForm.projectname" />
        </FormItem> -->
        <FormItem>
          <Button @click="handleResetSearchForm" class="reset-btn">重置</Button>
          <Button @click="handleSearchClick" type="primary">查询</Button>
        </FormItem>
      </div>
    </Form>

    <Table
      :columns="tableColumns"
      :data="tableData"
      :loading="tableLoading"
      border
      ref="tableRef"
      stripe
    >
      <template slot="action" slot-scope="{ row}">
        <Button @click="hanldeViewClick(row)" size="small" type="primary">查看</Button>
        <!-- <Button
          @click="hanldeRecallClick(row.dataid)"
          size="small"
          style="margin: 0 5px;"
          type="info"
        >撤回</Button>-->
      </template>
    </Table>
    <div class="page-wrapper">
      <Page
        :page-size="pageSize"
        :total="total"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
// revokeFlow
import { getInitiateList } from '@/api/message';
import dayjs from 'dayjs';

export default {
  data () {
    return {
      searchForm: {
        businessname: '', // 审批类型
        organizer: '' // 发起人
        // projectname: '' // 单位工程名称
      },

      tableColumns: [
        { type: 'selection', width: 55, align: 'center' },
        { title: '审批类型', key: 'approvalName', align: 'center' },
        { title: '发起人部门', key: 'organizerDept', align: 'center' },
        { title: '发起人', key: 'organizer', align: 'center' },
        { title: '当前处理人', key: 'approver', align: 'center' },
        { title: '发起时间', key: 'initiateTimeText', align: 'center' },
        { title: '当前状态', key: 'flowState', align: 'center' },
        { title: '操作', width: 90, slot: 'action', align: 'center' }
      ],
      tableData: [],
      tableLoading: true,

      // 分页
      total: 100,
      pageNum: 1,
      pageSize: 10
    };
  },
  mounted () {
    this.getList();
  },
  methods: {
    async getList () {
      this.tableLoading = true;
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };

      if (this.searchForm.businessname) {
        data.businessname = this.searchForm.businessname;
      }
      if (this.searchForm.organizer) {
        data.organizer = this.searchForm.organizer;
      }
      // if (this.searchForm.projectname) {
      //   data.projectname = this.searchForm.projectname;
      // }

      // console.log('我的发起 data=>', data);
      const resp = await getInitiateList(data);
      // console.log('我的发起 resp=>', resp);
      this.tableLoading = false;

      const info = resp.data.data;
      this.total = info.total;
      this.tableData = info.list;
      this.tableData.forEach(item => {
        if (item.initiateTime) {
          item.initiateTimeText = dayjs(item.initiateTime).format('YYYY-MM-DD');
        }
      });
    },
    handleResetSearchForm () {
      this.$refs.searchForm.resetFields();
      this.getList();
    },
    handleSearchClick () {
      this.getList();
    },
    hanldeViewClick (row) {
      // console.log('row', JSON.stringify(row, 2, 2));
      this.$router.push({
        path: '/msg_program/msg_initiate/detail',
        query: {
          dataid: row.dataid,
          type: row.type,
          dictId: row.dictId,
          approvalName: row.approvalName
        }
      });
    },
    // hanldeRecallClick (id) {
    //   this.$Modal.confirm({
    //     title: '确认撤回？',
    //     content: '<p>请确认是否撤回删除数据？</p>',
    //     loading: true,
    //     onOk: async () => {
    //       // console.log('撤回节点 req=>', id);
    //       await revokeFlow(id);
    //       // console.log('撤回节点 res=>', resp);
    //       this.getList();
    //       this.$Modal.remove();
    //     }
    //   });
    // },
    // 页码切换
    pageChange (page) {
      this.pageNum = page;
      this.getList();
    },
    // 页条数切换
    pageSizeChange (size) {
      this.pageSize = size;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.title-wrapper {
  margin-bottom: 10px;
}
.search-form {
  display: flex;
  .reset-btn {
    margin-right: 10px;
  }
  > .ivu-form-item:last-child {
    margin-right: 0;
  }
}
.page-wrapper {
  .ivu-page {
    float: right;
    margin: 10px 0;
  }
}
</style>
